<template>
  <div>
    <a-breadcrumb :style="{ margin: '16px 0' }">
      <a-breadcrumb-item>
        <router-link to="/">首页</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>案例库</a-breadcrumb-item>
    </a-breadcrumb>
    <div :style="{ background: '#fff', padding: '24px', minHeight: '380px' }">
      <a-list
        item-layout="vertical"
        :grid="{ gutter: 16, md: 4 }"
        size="large"
        :pagination="pagination"
        :data-source="listData"
      >
        <a-list-item slot="renderItem" key="item.title" slot-scope="item">
          <a-card hoverable>
            <img slot="cover" alt="example" :src="item.coverImage" />
            <a :href="item.url">
              <h2>{{ item.title }}</h2>
            </a>
            <p>
              <a-tag color="cyan">{{ item.explain }}</a-tag>
            </p>
          </a-card>
        </a-list-item>
      </a-list>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import yesapi from "@/components/yesapi.js";
const listData = [];

export default {
  data() {
    return {
      listData,
      pagination: {
        pageSize: 8
      }
    };
  },
  created: function() {
    this.getList();
  },
  methods: {
    // getList: function() {
    //   // 获取实例引用
    //   var that = this;
    //   // 使用axios库去异步获取远程数据
    //   axios
    //     .get("http://api.tianapi.com/txapi/rumour/index", {
    //       params: {
    //         key: "02740fcb753b35eff80e7fa788b5818d",
    //         num: 20
    //       },
    //       headers: {
    //         "Content-Type": "application/x-www-form-urlencoded"
    //       }
    //     })
    //     .then(function(response) {
    //       that.listData = response.data["newslist"];
    //       // console.log(response.data["newslist"]);
    //     })
    //     .catch(function(error) {
    //       console.log(error);
    //     });
    // }
    // http://hn216.api.yesapi.cn/?s=App.Table.FreeQuery&model_name=WritingCases&select=id%2Ctitle%2CcoverImage%2CcaseType&logic=and&where=%5B%5B%22id%22%2C+%22%3E%3D%22%2C+%221%22%5D%5D&is_real_total=1&app_key=5C559705EEC307BDDE4D087D3BE8C926&sign=FEEF8625ACFF79907392DA26210E1348
    getList() {
      var params = {
        s: "App.Table.FreeQuery",
        model_name: "WritingCases",
        select: "id,title,coverImage,caseType",
        logic: "and",
        where: '[["id", ">=", "1"]]',
        is_real_total: 1
      };
      var that = this;
      axios({
        method: "get",
        url: yesapi.YESAPI_HOST,
        params: yesapi.encrypt(params)
      })
        .then(function(response) {
          console.log(response["data"]["data"]["list"], that);
          that.listData = response["data"]["data"]["list"];
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>
<style>
.ant-card-cover img {
  height: 250px;
  object-fit: cover;
}
</style>
